<template>
    <div>
        <div id="head">
            <h1 style="font-size: 50px;color: white;position: absolute;top: 150px;left: 650px">会员中心</h1>
        </div>
        <el-row>
            <el-col :span="3">
                <p></p>
            </el-col>
            <el-col :span="18">
        <el-card v-if="hava">
            <img v-if="tableData.vipKindImg" :src="tableData.vipKindImg" style="width: 25vw;height: 30vh" class="image">
            <el-image v-else class="image" style="width: 25vw;height: 30vh">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline">暂无图片</i>
                </div>
            </el-image>
        <el-descriptions class="margin-top" :title="tableData.vipKindName" :column="1" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    卡号
                </template>
                {{tableData.vipCardNum}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-sold-out"></i>
                    折扣率
                </template>
                {{tableData.vipKindZhekoulv}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    余额
                </template>
                <el-tag size="small">{{tableData.vipCardBalance}}</el-tag>
                    <el-button type="primary" size="small" style="margin-left: 30px" @click="dialogVisible = true">充值</el-button>
            </el-descriptions-item>

        </el-descriptions>
        </el-card>
                <el-card v-else>
                    您还未拥有超级会员卡
                    <el-button @click="tobuyvip" type="primary" size="small" style="margin-left: 30px">前往购买</el-button>
                </el-card>
            </el-col>
        </el-row>
<!--        充值弹窗-->
        <el-dialog
                title="会员卡充值"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">
            <div>
                <el-radio v-model="money" label="50" border size="small">￥50</el-radio>
                <el-radio v-model="money" label="100" border size="small">￥100</el-radio>
                <el-radio v-model="money" label="200" border size="small">￥200</el-radio>
                <el-radio v-model="money" label="500" border size="small">￥500</el-radio>
                <el-radio style="margin-top: 10px;position: relative;left: -65px" v-model="money" label="z" border size="small">自定义</el-radio>
                <br>

                <div style="margin-top: 10px" v-if="money=='z'">
                    请输入金额：<el-input placeholder="请输入充值金额" type="number"
                                    oninput="value = value.replace(/^(-)(\d+).(\d\d).$/,'$1$2.$3').replace(/[^\d.]/g,'')"
                                    v-model="zmoney" style="width: 25%"></el-input>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" >取 消</el-button>
<!--充值 Recharge-->
    <el-button type="primary" @click="recharge">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "VipCenter",
        data(){
            return{
              tableData:[],
                hava:false,
                dialogVisible: false,
                money:"50",
                zmoney:"",
            }
        },
        methods:{
            //页面加载
            load() {
                var userId=JSON.parse(window.localStorage.getItem('user')).userId
                request.get('/vipcard/getvipcard/'+userId).then(res => {
                    console.log(res);
                    if (res.code === "200") {
                        this.tableData = res.data;
                    }
                    if (this.tableData.length != 0) {
                        this.hava = true
                    } else {
                        this.hava = false
                    }
                })
            },
            tobuyvip(){
                this.$router.push('/buyvip')
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.money="50"
                        this.zmoney=null
                        this.dialogVisible=false
                        done();

                    })
                    .catch(_ => {});

            },
            recharge(){
                if(this.money=="z"){
                    request.put('/vipcard/recharge',{vipCardId:this.tableData.vipCardId,money: this.zmoney}).then(res=>{
                        console.log(res)
                        if(res.code==='200'){
                            this.$notify.success('充值成功')
                            this.money="50"
                            this.zmoney=null //清空表格数据
                            this.dialogVisible = false; //关闭弹框
                            this.load(); //刷新列表
                        }else{
                            this.$notify.error(res.msg)
                        }
                    })
                }else {
                    request.put('/vipcard/recharge', {vipCardId:this.tableData.vipCardId,money: this.money}).then(res=>{
                        console.log(res)
                        if(res.code==='200'){
                            this.$notify.success('充值成功')
                            this.money="50"
                            this.zmoney=null //清空表格数据
                            this.dialogVisible = false; //关闭弹框
                            this.load(); //刷新列表
                        }else{
                            this.$notify.error(res.msg)
                        }
                    })
                }
            }
        },

        mounted() {
            this.load()

        }
    }
</script>

<style scoped>
    #head {
        height: 350px;
        background-image: url("../../assets/aboutbackground.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    /deep/ input::-webkit-outer-spin-button,
    /deep/ input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }
    /deep/ input[type='number'] {
        -moz-appearance: textfield;
    }
</style>